<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <link rel="stylesheet" href="../css/swiper.min.css">
      <style>
      body{
          padding-top: 2rem;
      }
      .header{
            width: 94%;
            height: 2.5rem;
            line-height: 2.5rem;
            padding: 0.5rem 0.8rem;
            text-align: center;
            position: fixed;
            top:1.5rem;
            background-color: #fff;
              border-bottom: 1px solid rgb(243, 243, 243, 0.5);
        }
        .header_img{
          width: 6%;
          height: 45%;
          float: left;
          margin-top: 0.5rem;
        }
      .header_img img{
        width: 100%;
        height: 100%;
      }
      .header h3{
        line-height: 3rem;
        width: 80%;
        text-align: center;
        margin-left: 0.3rem;
      }
      .content{
        width: 93%;
        height: 30%;
        padding: 1rem 0.8rem;
        margin-top: 2.5rem;
      }
      .content h3{
        width: 92%;
        margin: 0.5rem auto;
        height: 3rem;
        line-height:2rem;
      }
      .cont_img{
        width: 92%;
          margin: 2rem auto;
          height: 30%;
      }
      .cont_img img{
        width: 100%;
        height: 100%;
      }
      .content p{
        width: 92%;
        margin: 0rem auto;
        color: #181818;
        line-height: 1.2rem;
        font-size: 0.9rem;
      }
      .wep{
        width: 92%;
        margin:2rem auto 1rem;
      }
      .wep h3{
        width: 100%;
        text-align: center;
      }
      .fl{
        float: left;
      }
      .main_top{
        width: 100%;
        height: 2rem;
        line-height: 2rem;
      }
      .main_img {
        width: 7%;
        height: 62%;
        margin-top: 0.2rem;
        margin-right: 0.5rem;
    }
      .main_img img{
        width: 100%;
        height: 100%;
      }
      .wep p{
        margin-top: 1rem;
        line-height: 1rem;
      }
      .nv{
        margin-top: 1.5rem;
      }
      .footer{
        width: 100%;
        height: 3.5rem;
        border-top: 1px solid solid rgb(243, 243, 243, 0.5);

      }
      .footer_left{
        width: 55%;
        line-height: 2.5rem;
        padding-left: 0.5rem;
        height: 2.5rem;
        border-radius: 0.5rem;
        margin:0.5rem;
        background-color: rgb(243,243,243,0.5)
      }
      .footer_left input{
        outline: none;
        color: #ccc;
      }
      .footer_right{
        width: 35%;
        justify-content: space-between;
        display: flex;
        box-sizing: border-box;
        height: 2.5rem;
      }
      .right_pl{

        }
        .footer_img{
          width:59%;
          height:60%;

        }
        .footer_img img{
          width: 100%;
          height: 100%;

        }
        #right_p{
          background-color: red;
          color: #fff;
          border-radius: 1rem;
          position: relative;;
          width: 1.8rem;
          text-align: center;
          height: 1rem;
          bottom:-0.5rem;
          font-size: 0.7rem;
        }

      .pl{
        width: 100%;
        border-top: 1rem solid rgb(243,243,243,0.5);
        margin-bottom: 3.5rem;
        overflow: hidden;
      }
      .pl_top{
        width: 93%;
        height:1.5rem;
        padding: 0.5rem 0.8rem;
        line-height:2rem;
        position: re.lative;
        border-bottom: 1px solid rgb(243,243,243,0.5)
      }
      #pl_p{
        width: 25%;
      }
      .lines_s {
          position: absolute;
          top: 0.7rem;
          left: 23%;
          border-left: 0.1rem solid black;
          height:0.8rem;
      }
      .cont_one{
        width: 93%;
        /*height:5rem;*/
        padding: 0.5rem 0.8rem 0.8rem 0.8rem;
        background-color: #fff;
        margin-bottom: 1rem;

      }
      .cont_top{
        width: 100%;
        height: 3.5rem;
      }
      .cont_p{
        width: 30%;
        height: 1.5rem;
        line-height:1.5rem;
        margin-left: 0.5rem;
        margin-top: 0.5rem;
      }
      .cont_imgsa{
        width: 14%;
        height: 82%;
        margin-top: 0.2rem;
      }
      .cont_imgsa img{
        width: 100%;
        height: 100%;
        border-radius: 100%
      }
      .conts{
        height:3rem;
        line-height: 3rem;
      }
      .conts_p{
        width: 100%;
        margin-bottom: 0.5rem;
        border-bottom: 0.1rem solid rgb(243,243,243,0.5);  /*height: 50%;*/
        padding:0.5rem 0rem 0.5rem 0rem;
      }
      .fr{
        float: right;
      }
      .img_list{
      width: 90%;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      /*justify-content: space-between;*/
      margin-left: 0.5rem;
      }
      .img_list img{
          width:30%;
        margin-right: 0.2rem;
        margin-top: 0.2rem;
      }
      .footer{
        width: 100%;
        height: 3rem;
        position: fixed;
        bottom: 0.2rem;
        z-index: 999;
        background-color: #fff;
        /*border-top: 1px solid solid rgb(243, 243, 243, 0.5);*/

      }
      .footer_left{
        width: 75%;
        line-height: 2.5rem;
        padding-left: 0.5rem;
        height: 2.5rem;
        border-radius: 0.5rem;
        margin:0.1rem 0.5rem;;
        background-color: rgb(243,243,243,0.5)
      }
      .footer_left input{
        outline: none;
        color: #ccc;
      }
      .footer button{
        width: 15%;
        height: 2.5rem;
        outline: none;
      }
     .img_banner {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: black;
            z-index: 999;
            transition: opacity 1s ease-in-out;
        }
        #banner2 {
            width: 100%;
            height: 20rem;
            position: absolute;
            bottom: 20%;
            left: 0;
            right: 0;
        }

      </style>
  </head>
  <body>
    <div class="header">
      <div class="header_img">
        <img src="../image/u18.png" alt="" onclick="closewin()">
      </div>
      <h3 class="fl">详细内容</h3>
      <div style="width:7%; height:50%;margin-top:0.5rem;margin-right:1rem" class="fr">
        <img src="../image/aaq.png" id="aaq" width="100%" height="100%"alt="" onclick="sc_i()">
      </div>
    </div>

    <div class="content" id="content">

    </div>
    <div id="img_list" class="img_list">

    </div>
    <!--  -->
  <!-- <div class="img_banner" id="imgpage">
    <div class="big_img swiper-container" id="banner2">
        <div class=" swiper-wrapper" id="conts">
            <div class=" swiper-slides">
                <div class="swiper-items"><img src="../image/a22.png"></div>
            </div>
            <div class="swiper-slide"><img src="../image/u121.jpg"></div>

        </div>

    </div>

  </div> -->
  <!--  -->
    <div class="footer" style="clear:both">

    </div>
    <div class="pl">
       <div class="pl_top">
         <p class="fl" id="pl_p">全部评论</p>
           <div class="lines_s fl"></div>
         <p class="fl" id="pl_p"><span id="pl">0</span>条评论</p>
       </div>
       <div id="saylist">
         <!-- <div class="cont_one">
           <div class="cont_top">
             <div class="cont_imgsa fl">
               <img src="../image/aa17.png" alt="">
             </div>
             <div class="cont_p fl">
               <p>Angle</p>
               <p>10个月13天</p>
             </div>
             <div class="conts fr">
               2小时前
             </div>
           </div>
           <div class="conts_p fr">
             宝宝今天的样子·手工类的活动，家长需提前1小时到活动现场报名
           </div>
         </div> -->
     </div>

   </div>
   <div class="footer">
       <div class="footer_left fl">
         <input type="text" name="" placeholder="评论"  id="say_some">
       </div>
     <button type="button" name="button" onclick="sendmsg()">发送</button>
   </div>
    </div>
  </body>
  <script type="text/javascript" src="../script/jquery-1.8.3.js"></script>
  <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
    <script type="text/javascript" src="../script/swiper.js"></script>
    <script type="text/javascript" src="../script/swiper.min.js"></script>
  <script type="text/javascript">

      var userinfo = $api.getStorage('userinfo');
      var ok = true
      var id
      var sc_id = 0;//0代表未收藏加入收藏1代表已收藏，取消收藏
      var page = 1;
      var pagesize = 20
      var img_list = new Array()
      apiready = function(){
        id = api.pageParam.id
        get_list()
        get_say()
        api.addEventListener({
      			name:'user_login',
      			extra:{
      					threshold:0
      			}
      	}, function(ret, err){
      					userinfo=$api.getStorage('userinfo');
      				//	get_user()//获取用户数据

      	});

        api.addEventListener({
      			name:'user_register',
      			extra:{
      					threshold:0
      			}
      	}, function(ret, err){
      					userinfo=$api.getStorage('userinfo');
      					//get_user()//获取用户数据

      	});

        api.addEventListener({
      			name:'user_out',
      			extra:{
      					threshold:0
      			}
      	}, function(ret, err){
      					userinfo=$api.getStorage('userinfo');
      				//	get_user()//获取用户数据

      	});
        api.addEventListener({
             　　name:'scrolltobottom',
                 extra:{threshold:0}
             }, function(ret, err){
      　　　　　　get_say()
            });
      };

// 获取评论
      function get_say() {
        if(ok==false){
          return false
        }
        var html = ''
        var obj = $api.byId('saylist');

        api.ajax({
            url: SITE_URL+'square_api/index/get_say',
            method: 'post',
            data: {
                values: {
                    id:id,
                    page:page,
                    pagesize:pagesize
                }
            }
        },function(ret, err){
            if (ret) {
                if(ret.error==200){
                  for (var i = 0; i < ret.data.length; i++) {
                    var dat = ret.data[i]
                    var time = gettime(dat.time)
                    html +='<div class="cont_one">'
                    html +='<div class="cont_top">'
                    html +='<div class="cont_imgsa fl">'
                    html +='<img src="'+dat.head_img+'" alt="">'
                    html +='</div>'
                    html +='<div class="cont_p fl">'
                    html +='<p>'+dat.nick_name+'</p>'

                    html +='</div>'
                    html +='<div class="conts fr">'
                    html +=time
                    html +='</div>'
                    html +='</div>'
                    html +='<div class="conts_p fr">'
                    html +=''+dat.say_some+''
                    html +='</div>'
                    html +='</div>'
                  }
                  $api.append(obj, html);
                  page+=1

                }else{

                  ok = false;
                }
                //alert( JSON.stringify( ret ) );
            } else {
              msgcode('请检查网络连接')
                //alert( JSON.stringify( err ) );
            }
        });

      }

      function sendmsg() {
        var msg = $("#say_some").val()
        if(msg==''){
          msgcode('说点什么吧')
          return false;
        }
        if(!userinfo){
          login_at()
          return false;
        }
        var html =''
      //  var obj = $api.byId('id');

        api.ajax({
            url: SITE_URL+'square_api/comment/add_msg',
            method: 'post',
            data: {
                values: {
                    user_id: userinfo.id,
                    ing_id:id,
                    say_some:msg
                }
            }
        },function(ret, err){
            if (ret) {
              if(ret.error==200){

                html +='<div class="cont_one">'
                html +='<div class="cont_top">'
                html +='<div class="cont_imgsa fl">'
                html +='<img src="'+ret.data.head_img+'" alt="">'
                html +='</div>'
                html +='<div class="cont_p fl">'
                html +='<p>'+ret.data.nick_name+'</p>'

                html +='</div>'
                html +='<div class="conts fr">'
                html +='刚刚'
                html +='</div>'
                html +='</div>'
                html +='<div class="conts_p fr">'
                html +=''+ret.data.say_some+''
                html +='</div>'
                html +='</div>'
                $("#saylist").prepend(html)

                msgcode('评论成功')
                $("#say_some").val('')
              }else{
                msgcode('稍后再试')
              }
                //alert( JSON.stringify( ret ) );
            } else {
              msgcode('请检查网络连接')
                //alert( JSON.stringify( err ) );
            }
        });

      }

      function sc_i() {

        if(!userinfo){
          login_at()
          return false;
        }
        api.ajax({
            url: SITE_URL+'square_api/collection/index',
            method: 'post',
            data: {
                values: {
                    user_id: userinfo.id,
                    pid:id,
                    type:sc_id
                }
            }
        },function(ret, err){
            if (ret) {
              if(ret.error==200){
                if(sc_id==1){
                  api.sendEvent({
                      name: 'sc',

                  });
                  msgcode('已取消收藏')
                  sc_id=0
                  $("#aaq").attr('src','../image/aaq.png')
                }else{
                  api.sendEvent({
                      name: 'sc',

                  });
                  msgcode('已加入收藏')
                  $("#aaq").attr('src','../image/aaqs.png')
                  sc_id=1
                }
              }else{
                msgcdoe('操作失败')
              }
//                alert( JSON.stringify( ret ) );
            } else {
              msgcode('请检查网络连接')
  //              alert( JSON.stringify( err ) );
            }
        });

      }
      function get_list() {
        var html = ''
        var obj = $api.byId('img_list');
        if(userinfo){
          uid = userinfo.id
        }else{
          uid = 0
        }
        api.ajax({
            url: SITE_URL+'square_api/index/get_list',
            method: 'post',
            data: {
                values: {
                    id: id,
                    user_id:uid
                }
            }
        },function(ret, err){
            if (ret) {
              if(ret.error==200){
                $("#content").html(ret.data.content)
                $("#pl").html(ret.data.pl)
                // alert(ret.data.sc)
                sc_id = ret.data.sc
                if(sc_id==1){
                  $("#aaq").attr('src','../image/aaqs.png')
                }else{
                  $("#aaq").attr('src','../image/aaq.png')
                }
                //alert(ret.data.img_list)
                if(ret.data.img_list.length>0 && ret.data.img_list!=''){
                  for (var i = 0; i < ret.data.img_list.length; i++) {
                    var dat = ret.data.img_list[i]
                    img_list.push(dat)
                    html +='<img src="'+dat+'" style="width:6.5rem;height:6.5rem;float:left" onclick="dimg('+i+')">'
                  }
                  $api.append(obj, html);

                }
              }
              //  alert( JSON.stringify( ret ) );
            } else {
              msgcode('请检查网络连接')
                //alert( JSON.stringify( err ) );
            }
        });

      }
      function dimg(keys) {
          var photoBrowser = api.require('photoBrowser');
          photoBrowser.open({
              images: img_list,
              activeIndex:keys,
              bgColor:'#6ab494',
              // placeholderImg: 'widget://res/img/apicloud.png',
              bgColor: '#000'
          }, function(ret, err) {
              if (ret) {
                  if(ret.eventType=='click'){
                      photoBrowser.close();
                  }
                  //  alert(JSON.stringify(ret));
              } else {
                  //alert(JSON.stringify(err));
              }
          });
      }
  </script>
  </html>
